<template>
  <div>
    <!--预约挂号-->
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>预约详情</h1>
      </div>
      <br />
    </div>

    <div class="hzxx">
      <p >体检人信息</p>
      <el-card class="box-card">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="患者姓名">
              <el-input
                v-model="thepatient.name"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input
                v-model="thepatient.documentType"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>

            <el-form-item label="就诊人地址">
              <el-input
                v-model="thepatient.address"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="就诊卡号">
              <el-input
                v-model="thepatient.hospitalNumber"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="thepatient.number"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="thepatient.phone"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="患者头像">
              <el-input
                v-model="thepatient.name"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="关系">
              <el-input
                v-model="thepatient.relation"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <div class="yyxx">
      <p>预约信息</p>
      <el-card class="box-card" style="height:380px;">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="就诊医院">
              <el-input
                v-model="campus.campusName"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="预约体检时间">
              <el-input
                v-model="medicalAppointment.createTime"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="体检费">
              <el-input
                v-model="setMeal.price"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>

          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="医院地址">
              <el-input
                v-model="campus.campusAddress"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="候诊时间">
              <el-input
                v-model="setMeal.createTime"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="预约时间">
              <el-input
                v-model="medicalAppointment.createTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="报道科室">
              <el-input
                v-model="divisiontype.divisionName"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="体检套餐">
              <el-input
                v-model="setMeal.setMealName"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-input v-model="setMeal.state" style="width:250pxs;" disabled>
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="anniu">
          <el-button type="primary" plain @click="quxiao">确定</el-button>
           <el-button type="primary" plain @click="baogao()" v-if="medicalAppointment.state=='已完成'">查看报告</el-button>
           <el-button type="primary" plain @click="addbaogao()" v-if="medicalAppointment.state=='未完成'">添加报告</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      medicalAppointment: [],
      thepatient: [],
      setMeal: [],
      divisiontype: [],
      campus: [],
      physicalreport: []
    };
  },
  created() {
    //接收id
    this.id = localStorage.getItem("id");
      //  alert( this.id)
    //页面渲染之前执行，一般调用methods定义的方法
    this.getByIdappointment();
  },
  methods: {
    getByIdappointment() {
      this.$axios
        .get("/user/user/user/getByIdmedicalAppointment/" + this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.medicalAppointment = res.data.data.medicalAppointment;
            this.thepatient = res.data.data.thePatient;
            this.divisiontype = res.data.data.divisionType;
            this.setMeal = res.data.data.setMeal;
            this.campus = res.data.data.campus;
            this.physicalreport = res.data.data.physicalReport;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    quxiao() {
      this.$router.push("/tijian");
    },
     baogao(id) {
      //  alert(this.thepatient.id)
      this.$router.push("/baogaoxiangqing");
    },
     addbaogao(id) {
      //  alert(this.medicalAppointment.id)
      localStorage.setItem("medicalAppointmentid", JSON.stringify(this.medicalAppointment.id));
      this.$router.push("/addbaogaoxiangqing");
    },
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}
.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}
.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  height: 260px;
}
.hzxx {
  background-color: #e6e6e6;
}
.hzxx p {
  width: 200px;
  margin-left: -50px;
  color: #4da6ff;
}
.hzxx_box1 {
  width: 300px;
  float: left;
}
.hzxx_box2 {
  float: left;
  margin-left: 100px;
}
.yyxx {
  background-color: #e6e6e6;
}
.yyxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}
.anniu {
  width: 400px;
  height: 50px;
  margin-left: 100px;
  margin-top: 280px;
}

</style>
